<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>

		<style>
			.container {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				resize: both;
			}

			.list {
				width: 24%;
				height: 100px;

				background-color: skyblue;
				margin: 10px;
			}


			
			.list:nth-child(3n) {
				margin-right: 10px;
			}
			
			/* 使用伪元素辅助左对齐 
			如果最后一行 只有一个元素的时候 ，可以尝试 这样做
			*/
			.container::after {
				content: '';
				display: block;
				flex: 1 1 auto;
			}
		</style>
	</head>
	
	<!-- 
	 
	 CSS flex布局-解决最后一行元素对齐问题
	 https://blog.51cto.com/jackiehao/4533918
	 -->
	<body>

		<div class="container">
			<div class="list"></div>
			<div class="list"></div>
			<div class="list"></div>
			<div class="list"></div>
			<div class="list"></div>
			<div class="list"></div>
			<div class="list">7</div>
			<!-- <div class="list"></div> -->
			<!-- <div class="list"></div> -->
		
		</div>


	</body>
</html>
